<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!-- 新增    生成列表结构 (v-for  数组)    获取用户输入(v-model)     回车，新增数据(v-on .enter 添加数据)     -->

<!-- 删除    点击删除指定内容（v-on splice  数据改变 和数据绑定的元素同步改变 ） -->
<!-- 统计   统计信息个数  数组长度  v-text length -->
<!-- 清空    点击清除所有信息 v-on  数组清空-->
<!-- 隐藏    没有数据时，影藏元素（v-show  v-if）-->

<!-- 主体区域 -->

<section id="todoapp">

  <!-- 输入框 -->
  <header class="header">
    <h1>记事本</h1>
    <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入" class="new-todo">
  </header>
<!-- 列表区域 -->
<section class="main">
  <ul class="tode-list">
    <li class="todo" v-for="(item,index) in list">
      <div class="view">
        <span class="index">{{index+1}}.</span>
        <label> {{item}}</label>
        <button class="destroy" @click="remove(index)">-</button>
      </div>
    </li>
  </ul>

</section>
<!-- 清空和统计 -
<section class="footer">   <!--也可以直接父元素  v-if="list.length!=0" -->
  <span class="todo-count" v-if="list.length!=0">
    <strong>{{list.length}}</strong>
    items left
  </span>
  <button class="clear-completed" @click="clear" v-show="list.length!=0">
    Clear
  </button>

</section>
<!-- 底部 -->
<footer class="info">

</footer>



<div>pppp</div>
<div>pppp</div>
<div>pppp</div>


<script src="./js/vue.js"></script>
<script>
  var app = new Vue({
    el: '#todoapp',
    data: {
      list: [
        "吃饭饭",
        "谁觉觉",
        "打豆豆",
        "写代码",
      ],
      inputValue: '好好学习，天天向上'

    },
    methods: {
      add: function(){
        this.list.push(this.inputValue)
      },
      remove: function (index) {
        this.list.splice(index, 1)
        },
        clear: function () { 
          this.list = []
         }

    }
  })
</script>

</body>
</html>